<template>
    <div class="bi-page" :class="{'has-bgcolor': bgColor}" v-loading="loading">
        <div class="bi-page__banner" v-if="banner">
            <div class="bi-page__banner-inner">
                <span class="bi-page__banner-text" :class="['is-' + subTextAlign]">
                    <span class="bi-page__title">{{title}}</span>
                    <span class="bi-page__subtext">{{subText}}</span>
                </span>
            </div>
        </div>
        <div class="bi-page__container">
            <slot></slot>
        </div>
        <div class="bi-page__footer">
            <div class="bi-page__bottom" v-if="enableBottom">
                <span class="bi-page__bottom-text">已经到底啦~</span>
            </div>
        </div>
        <div class="bi-page__scrolltip" v-show="enableBottom && bottomVisible" @click="handleMoreClick">上滑查看更多</div>
    </div>
</template>
<script>
export default {
    name: 'BiPage',
    props: {
        title: {
            type: String
        },
        banner: {
            type: Boolean,
            default: false
        },
        subText: {
            type: String
        },
        subTextAlign: {
            type: String,
            default: 'left'
        },
        loading: {
            type: Boolean
        },
        bgColor: {
            type: Boolean,
            default: true
        },
        enableBottom: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            bottomVisible: false
        }
    },
    mounted () {
        if (this.enableBottom) {
            window.addEventListener('scroll', this.handlePageScroll)
            window.document.documentElement.addEventListener('scroll', this.handlePageScroll)
            this.loopCheckPageBottomVisible()
        }
    },
    methods: {
        handlePageScroll () {
            clearTimeout(this._loopTimer)
            this.checkPageBottomVisible(() => {
                this.loopCheckPageBottomVisible()
            })
        },
        handleMoreClick () {
            this.scrollTop(this.getPageScrollTop() + window.innerHeight)
            this.checkPageBottomVisible()
        },
        loopCheckPageBottomVisible () {
            clearTimeout(this._loopTimer)
            this._loopTimer = setTimeout(() => {
                this.checkPageBottomVisible()
                this.loopCheckPageBottomVisible()
            }, 1000)
        },
        getPageScrollTop () {
            return Math.max(window.document.body.scrollTop, window.document.documentElement.scrollTop)
        },
        getPageScrollHeight () {
            return window.document.documentElement.scrollHeight
        },
        scrollTop (scrollTop) {
            window.document.body.scrollTop = scrollTop
            window.document.documentElement.scrollTop = scrollTop
        },
        checkPageBottomVisible (callback) {
            clearTimeout(this._checkTimer)
            this._checkTimer = setTimeout(() => {
                this.bottomVisible = this.getPageScrollHeight() - this.getPageScrollTop() > window.innerHeight + 120
                callback && callback()
            }, 20)
        }
    },
    beforeDestroy () {
        clearTimeout(this._loopTimer)
        clearTimeout(this._checkTimer)
        window.removeEventListener('scroll', this.handlePageScroll)
        window.document.documentElement.removeEventListener('scroll', this.handlePageScroll)
    }
}
</script>
<style lang="scss">
.bi-page{
    font-size: 14px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    &.has-bgcolor{
        background-color: #f7f8fa;
    }
}
.bi-page__banner {
    padding: 12px 15px;
    margin-bottom: 10px;
    background-color: #fff;
}
.bi-page__banner-inner{
    height: 140px;
    min-height: 140px;
    background: url('./images/banner.png') no-repeat 50% 50% #5fabf8;
    background-size: cover;
    color: #fff;
    text-shadow: 0px 2px 0px #0554A0;
    padding-top: 28px;
    padding-left: 24px;
    position: relative;
    border-radius: 6px;
    .bi-page__title{
        display: block;
        line-height: 1.6em;
        font-size: 22px;
    }
    .bi-page__subtext{
        font-size: 22px;
    }
    position: relative;
    z-index: 3;
}
.bi-page__banner-text{
    display: inline-block;
    &.is-left {
        text-align: left;
    }
    &.is-center {
        text-align: center;
    }
}
.bi-page__container{
    flex: 1;
}
.bi-page__bottom{
    color: #aaa;
    font-size: 14px;
    padding: 18px 0;
    text-align: center;
}
.bi-page__scrolltip{
    position: fixed;
    z-index: 100;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    color: #fff;
    background-color: rgba(0,0,0,.4);
    height: 18px;
    line-height: 18px;
    box-sizing: content-box;
    border-radius: 15px;
    font-size: 14px;
}
</style>
